<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue.min.js"></script>
</head>
<body>
<div id="a">
    <h3>{{text}}</h3>
    <input type="text" v-model="text"><br>
    懒加载：<input type="text" v-model.lazy="text"><br>
    <h3>{{nums}}</h3>
    数值输入：<input type="text" v-model.number="nums"><br>
    <pre>{{text}}</pre>
    去收尾空格：<input type="text" v-model.trim="text"><br>

    <h3>下拉框：{{edu}}</h3>
    <select v-model="edu">
        <option value="1">高中</option>
        <option value="2">大专</option>
        <option>本科</option>
    </select>

    <h3>单选框：{{week}}</h3>
    <input type="radio" value="1" v-model="week">星期一
    <input type="radio" value="2" v-model="week">星期二
    <input type="radio" v-model="week">星期三

    <h3>多选框：{{likes}}</h3>
    <input type="checkbox" value="1" v-model="likes">篮球
    <input type="checkbox" value="2" v-model="likes">电影
    <input type="checkbox" v-model="likes">看书

    <pre>多行文本框：{{rows}}</pre>
    <textarea v-model="rows"></textarea>
</div>
<script>
    var v = new Vue({
        el:"#a",
        data:{
            text:"",
            nums:0,
            edu:"",
            week:"",
            likes:[],
            rows:""
        }
    })
</script>


</body>
</html>